<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>小米轮播图</title>
	<style type="text/css">
	    *{
	    	padding:0;margin:0;
	    }
        .box{
        	width:1226px;height:460px;/*background:yellow;*/margin:0 auto;margin-top:100px;
        	position: relative;cursor: pointer;  
        }
        .list{
           width:1226px;height:460px;position: relative;
        }
        .list img{
        	position: absolute;top:0;left:0;
        }
        li{
        	list-style: none;
        }
        .click_list{
        	position: absolute;right:20px;bottom:15px;
        }
        .click_list li{
        	width:8px;height:8px;border:1px solid rgb(0,0,0,0.5);border-radius:50%;
        	float: left;margin-right: 10px;background:#6B6B6B;cursor: pointer;
        }
        .left{
           width:40px;height:68px;position:absolute;top:200px;left:300px;
           background:  url(./mi_images/1.png) -84px 0 no-repeat;


        }
        .right{
           position:absolute;right:0px;top:200px;
            width:40px;height: 68px;
            background:  url(./mi_images/1.png) -126px 0 no-repeat;
        }
	</style>
</head>
<body>

    <div class="box" id="div">
   	    <div class="list">
   	   	    <img src="http://i3.mifile.cn/a4/xmad_14882708477046_YbxFS.jpg" alt="" class="img">
   	   	    <img src="http://i3.mifile.cn/a4/xmad_14882707247713_mjdJt.jpg" alt="" class="img">
   	   	    <img src="http://i3.mifile.cn/a4/79252562-ec72-48c6-b0fa-a48faf61decb" alt="" class="img">   	   	    
   	   	    <img src="http://i3.mifile.cn/a4/xmad_14876681632344_YFXhJ.jpg" alt="" class="img">
   	   	    <img src="http://i3.mifile.cn/a4/xmad_14882040011211_ryUsc.jpg" alt="" class="img">
   	    </div>
   	    <ul class="click_list">
   	    	<li></li>
   	    	<li></li>
   	    	<li></li>
   	    	<li></li>
   	    	<li></li>
   	    </ul>
        <div class="left"></div>
        <div  class="right"></div>
    </div>

   <script type="text/javascript">
        //抓取box
        var box = document.getElementById('div');
        //抓取图片
        var img = document.getElementsByClassName('img');
        //抓取li
        var li = document.getElementsByTagName('li');

        var left = document.getElementsByClassName('left');
        var right = document.getElementsByClassName('right');

        //设置一个变量规定跳转方向
        num = 0;
        function run(){
            //做一个循环，把所有图片都隐藏
            for(var i=0;i<img.length;i++){            	
             	img[i].style.display = "none";
             	//其他li是原来的颜色
             	li[i].style.background = '#6B6B6B';
            }
            
            //把当前页面显示出来   num=0  1 2 3 4
            img[num].style.display = "block";
            //当点击li时背景颜色变白
            li[num].style.background = "#fff";
            //当自动跳转到最后一张时，又返回从第0张开始
        	if(num==img.length-1){
        		num = 0;
        	}else{
        		num++;
        	}
        } 
         time = setInterval(run,500);  //设置定时器  进入页面时自动跳转    

        //给box加事件，当鼠标移进它时停止，当鼠标移出它时图片跳转
        box.onmouseover = function(){
          //定位  当鼠标进时  变成有背景的图标
          left[0].style.backgroundPosition ="0 0"; 
          right[0].style.backgroundPosition = "-42px 0" 
        	clearInterval(time);
        }

        box.onmouseout = function(){	
          left[0].style.backgroundPosition ="-84px 0";
          right[0].style.backgroundPosition = "-126px 0";
          time = setInterval(run,500); //1秒钟跳转一次
        }

       //加点击事件   循环
        for(var i=0;i<li.length;i++){
       	    //调用一个点击方法
       	    click_list(i);
        }
         
        //点击
        function click_list(j){
        	//li是返回对象 用数组下标取出元素
            li[j].onclick = function(){
            	//当点击li时对应弹出相应图片
            	//先制定一个标准方向
            	num = j ;
            	//执行run()方法
            	run();
            }
        }

       
        right[0].onclick = function(){
            run();
        }    

        left[0].onclick = function(){
          if(num==0){  
             num = img.length-2;   //num==img.length-2=3
          }else if(num==1){  
             num = img.length-1;    //num==img.length-1=4
          }else{
             num-=2;
          }
            
            run();
        }
   </script>
	
</body>
</html>